Scss

Scss中文文档

变量定义

$gray: #999;  // 变量
$rice: #ffcf76;
$grass: #58fc73;
$side: top;

暴露到全局

.sty{
    $width: 200px !global;
}

父级引用

.box{
    color: $gray;
    &:hover{
        cursor: pointer;
    }
}

继承选择器

.content{
    @extend .box;
    width: $width;
    height: $width * .7;
    background: $rice;
}

类名嵌套

.item-border {
    border: {
        style: solid;
        left: {
            width: 1px;
            color: red;
        }
        right: {
            width: 2px;
            color: blue;
        }
    }
}

变量引用

.round-#{$side} {
    border-#{$side}: 10px;
}

定义模块

@mixin name($width, $height, $radius) {
    width: $width;
    height: $height;
    border-radius: $radius;
    background: $grass;
}

调用模块

.round{
    @include name(100px, 100px, 50%);
}

if 条件

$navbar-width: 800px;
$item: 5;
p {
    @if $navbar-width/$item - 10px < 200 { border: 2px dotted; }
    @if $navbar-width/$item - 10px == 150 { border: 1px solid; }
}

for 循环

@for $i from 1 to 5 {
    .border-#{$i} {
        border: #{$i}px solid blue;
    }
}

while 循环

$i: 1;
@while $i < 5 {
    .border-#{$i} { border: #{$i}px solid blue; }
    $i: $i + 1;
}

each 循环

$arr: top, right, bottom, left;
@each $item in $arr {
    .icon-#{$item} {
        background-image: url("/image/#{$item}.jpg");
    }
}

自定义函数

@function double($n) {
    @return $n * 2;
}
#navbar {
    width: double(5px);  // 函数调用
}